<template>
	<div class="form">
		<!--气泡-->
		<ul class="bg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

		<div class="form-box">
			<div class="font">
				<!--工具简介-->
				<div class="tool-info">
					<h2>欢迎使用悟空淘助手</h2>
					<img src="@/assets/images/login-font.png" alt="" />
				</div>

				<!--登录框-->
				<div class="login-box" v-if="operate === 'login'">
					<h2 class="title">登录</h2>

					<!--动态加载组件-->
					<component
						:is="loginMethod.active"
						@changeOperate="changeOperate"
						:phone="phone"
					></component>

					<!--切换至注册-->
					<p class="register-or-login">
						还没有账号？<a @click="operate = 'register'">去注册</a>
					</p>

					<!--切换登录方式-->
					<ul class="login-method">
						<li
							v-for="(item, index) in loginMethod.list"
							:key="index"
							@click="changeMethod(item)"
							:class="{ active: loginMethod.active === item.key }"
						>
							<i class="iconfont" :class="item.icon"></i>
							<p>{{ item.label }}</p>
						</li>
					</ul>
				</div>

				<!--注册框-->
				<div class="register-box" v-if="operate === 'register'">
					<h2 class="title">注册</h2>

					<component :is="operate"></component>

					<!--切换至登录-->
					<p class="register-or-login">
						已有账号？<a @click="operate = 'login'">立即登录</a>
					</p>
				</div>

				<!--找回密码-->
				<div class="register-box" v-if="operate === 'forget'">
					<h2 class="title">找回密码</h2>

					<component :is="operate"></component>

					<!--切换至登录-->
					<p class="register-or-login">
						<a @click="operate = 'login'">切换至登录</a>
					</p>
				</div>
			</div>
		</div>

		<!-- 备案 -->
		<div class="record">
			<p>闽ICP备18018546号-3</p>
			<a href="http://www.beian.miit.gov.cn/" target="_blank"
				>http://www.beian.miit.gov.cn/</a
			>
		</div>
	</div>
</template>

<script>
import components from './components';
// import { isPc } from '@/cool/utils/index';

export default {
	components: components,
	data() {
		return {
			operate: 'login',
			loginMethod: {
				active: 'password',
				list: [
					{
						label: '密码登录',
						key: 'password',
						icon: 'icon-passwd'
					},
					{
						label: '扫码登录',
						key: 'scan',
						icon: 'icon-scan'
					},
					{
						label: '验证码登录',
						key: 'sms',
						icon: 'icon-sms'
					}
				]
			},
			phone: null
		};
	},
	created() {
		// if (!isPc()) {
		// 	this.$router.push('/login-h5');
		// }
	},
	methods: {
		// 切换登录方式
		changeMethod(item) {
			this.loginMethod.active = item.key;
		},

		// 注册成功
		registerNext(phone) {
			this.operate = 'login';
			this.loginMethod.active = 'password';
			if (phone) {
				this.phone = phone;
			}
		},

		// 切换操作
		changeOperate(operate) {
			this.operate = operate;
		},

		async next() {
			// 用户信息
			await this.$store.dispatch('userInfo');

			// 权限菜单
			const [first] = await this.$store.dispatch('permMenu');

			if (!first) {
				this.$message.error('该账号没有权限');
			} else {
				this.$nextTick(() => {
					this.$router.push('/');
				});
			}
		}
	}
};
</script>

<style lang="stylus" scoped>
.form {
	height: 100vh;
	width: 100vw;
	position: relative;
	background: linear-gradient(to bottom right, $linear-color, $main-color);

	.form-box {
		height: 506px;
		width: 940px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.45);
		position: absolute;
		left: calc(50% - 470px);
		top: calc(50% - 253px);

		.font {
			height: 524px;
			width: 900px;
			padding: 40px 34px;
			border-radius: 20px;
			background: $color-white;
			position: absolute;
			left: calc(50% - 450px);
			top: calc(50% - 262px);
			display flex
			justify-content space-between

			.tool-info {
				width 60%
				h2 {
					letter-spacing: 1px;
					margin-bottom 28px;
					font-size 22px
					font-weight 500
					padding-left 40px
					color #313131
				}
				img {
					height 86%
				}
			}
			.login-box, .register-box {
				width 40%
				display flex
				flex-direction column
				justify-content space-between
				h2 {
					font-size 22px
					font-weight 500
					color #242348
					text-align center
				}
				.register-or-login {
					margin-top -10px
					text-align center
					a {
						color #065FFE
						cursor pointer
						&:hover {
							color $main-color
						}
					}
				}
				.login-method {
					display flex
					justify-content space-between
					li {
						display flex
						justify-content center
						align-items center
						flex-direction column
						color #000
						opacity .5
						cursor pointer
						transition .3s
						i {
							margin-bottom 10px
						}
						p {
							font-size 16px
						}
						&.active, &:hover {
							color $color-red
							opacity 1
						}
					}
				}
			}
		}
	}
	.record {
		position absolute;
		bottom: 20px;
		width 100%;
		text-align center;
		color white;
		a {
			color: white;
		}
	}


	.bg-bubbles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: url("../../assets/images/login-bg.png") no-repeat center center;
		background-size 90% 90%
		li {
			position: absolute;
			bottom: -160px;
			width: 40px;
			height: 40px;
			background-color: rgba(255, 255, 255, 0.15);
			list-style: none;
			animation: square 15s infinite;
			transition-timing-function: linear;
			border-radius: 50%;
			&:nth-child(1) {
				left: 10%;
			}

			&:nth-child(2) {
				left: 20%;
				width: 90px;
				height: 90px;
				animation-delay: 2s;
				animation-duration: 7s;
			}

			&:nth-child(3) {
				left: 25%;
				animation-delay: 4s;
			}

			&:nth-child(4) {
				left: 40%;
				width: 60px;
				height: 60px;
				animation-duration: 8s;
				background-color: rgba(255, 255, 255, 0.3);
			}

			&:nth-child(5) {
				left: 70%;
			}

			&:nth-child(6) {
				left: 80%;
				width: 120px;
				height: 120px;
				animation-delay: 3s;
				background-color: rgba(255, 255, 255, 0.2);
			}

			&:nth-child(7) {
				left: 32%;
				width: 160px;
				height: 160px;
				animation-delay: 2s;
			}

			&:nth-child(8) {
				left: 55%;
				width: 20px;
				height: 20px;
				animation-delay: 4s;
				animation-duration: 15s;
			}

			&:nth-child(9) {
				left: 25%;
				width: 10px;
				height: 10px;
				animation-delay: 2s;
				animation-duration: 12s;
				background-color: rgba(255, 255, 255, 0.3);
			}

			&:nth-child(10) {
				left: 85%;
				width: 160px;
				height: 160px;
				animation-delay: 5s;
			}
		}
	}
	@keyframes square {
		0% {
			opacity: 0.5;
			transform: translateY(0px) rotate(45deg);
		}

		25% {
			opacity: 0.75;
			transform: translateY(-400px) rotate(90deg);
		}

		50% {
			opacity: 1;
			transform: translateY(-600px) rotate(135deg);
		}

		100% {
			opacity: 0;
			transform: translateY(-1000px) rotate(180deg);
		}
	}
}
</style>
